<template>
  <div :class="$style.msgBatSend">
    <ContentWrap>
      <div class="button-container" style="padding-top: 0px;">
        <div :class="$style.tip">温馨提示：单次批量发送短信限量500条，上传短信量请勿超限</div>
        <Button type="primary" @click="downHandle">下载模板</Button>
        <DialogUpload
          ref="export"
          :action="action"
          :limit="1"
          :destroy="false"
          :click-down="false"
          :on-exceed="onExceed"
          :on-error="onErrorHandle"
          :on-remove="onRemove"
          :auto-upload="true"
          :on-success="onSuccessHandle"
          :exist-file-list="fileList"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          text="导入文件"
          :show-file-num="false"
          title="导入文件"
        />
        <Button type="primary" @click="confirmSendHandle">确认发送</Button>
      </div>
      <div class="table-box">
        <div class="table-list-box">
          <el-table
            :data="data"
            row-key="id"
            border
            height="400"
            highlight-current-row
            header-row-class-name="table-list-header"
          >
            <el-table-column type="index" align="center" label="序号" sortable></el-table-column>
            <el-table-column prop="phone" label="手机号" sortable sort-by="phone"></el-table-column>
            <!-- <el-table-column prop="deptCode" label="部门" sortable sort-by="deptCode"></el-table-column> -->
            <!-- <el-table-column prop="group" label="使用组" sortable sort-by="group"></el-table-column> -->
            <el-table-column prop="content" label="短信内容" sortable sort-by="content" show-overflow-tooltip>
              <!-- <template v-slot="{row}">
                <el-tooltip effect="dark" :content="row.content" placement="bottom">
                  <p :class="$style.content">{{ row.content }}</p>
                </el-tooltip>
              </template> -->
            </el-table-column>
            <el-table-column prop="isTiming" label="是否定时发送" sortable sort-by="isTiming">
              <template v-slot="{row}">
                <span>{{ row.isTiming===1?'是':'否' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendDate" label="发送时间" sortable sort-by="sendDate" width="150"></el-table-column>
            <el-table-column prop="sender" label="发送人" sortable sort-by="sender">
              <template v-slot="{row}">
                <span>{{ `${row.senderName}(${row.sender})` }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="{row}">
                <Button type="danger" @click="removeItemRow(row)">删除</Button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            :current-page.sync="page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import Button from '@/components/Button'
import DialogUpload from '@/components/Upload/DialogUpload'
import { downFileByStream, deepCopy } from '@/utils'
import { download, submit } from '@/api/sms'
import pagination from '@/utils/pagination'
export default {
  name: 'SMSBatchSend',
  components: {
    ContentWrap,
    Button,
    DialogUpload
  },
  data() {
    return {
      action: '/call-center/api/v1/smsSendRecord/creatBatch',
      // 上传的批量发送短信
      sendList: [],
      data: [],
      fileList: [],

      // 分页相关
      page: 1,
      pageSize: 10,
      total: 0

    }
  },
  methods: {
    // 上传成功
    onSuccessHandle(res, file, fileList) {
      if (res.success === 0) {
        this.$message.error(res.msg)
        return
      }
      this.sendList = res.data
      this.page = 1
      this.pageSize = 10
      this.total = 0
      const d = pagination(this.sendList, this.page, this.pageSize)
      this.data = d.data
      this.total = d.total
    },
    // 上传文件超过限制
    onExceed() {
      this.$message.error('最多只能上传一个文件！')
    },
    // 上传失败
    onErrorHandle(err, file, fileList) {
      console.log(err)
      this.$message.error('上传失败！请重新上传！')
      this.fileList = []
      this.$refs.export.cancelAllHandle()
    },
    // 删除文件
    onRemove() {
      this.sendList = []
      this.onSuccessHandle({ data: this.sendList })
    },
    // 下载模板
    downHandle() {
      return download().then(res => {
        // let filename = res.headers['content-disposition']
        // filename = filename.split('=')[1]
        downFileByStream(res.data, '批量发送短信模板.xlsx')
      })
    },
    // 确认发送
    confirmSendHandle() {
      if (this.sendList.length <= 0) {
        this.$message.error('请导入文件！')
        return
      }
      return this.$msgbox({
        title: '确认发送',
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        message: '确认批量发送短信吗？'
      }).then(() => {
        return submit(this.sendList).then(res => {
          this.$message.success('提交成功！')
          this.$closePage()
        })
      })
    },
    // 删除
    removeItem(row) {
      console.log(row)
    },
    // 分页
    handleSizeChange(v) {
      const d = pagination(this.sendList, this.page, v)
      this.data = d.data
      this.total = d.total
    },
    handleCurrentChange(v) {
      const d = pagination(this.sendList, v, this.pageSize)
      this.data = d.data
      this.total = d.total
    },
    // 删除
    removeItemRow(row) {
      this.$msgbox({
        title: '删除',
        message: '确认删除？',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        const list = deepCopy(this.sendList)
        for (let i = 0; list.length > i; i++) {
          const item = list[i]
          if (item.id === row.id) {
            list.splice(i, 1)
            break
          }
        }
        this.sendList = list
        this.onSuccessHandle({ data: list })
      })
    }
  }
}
</script>
<style lang='scss' module>
.msgBatSend{
  .tip{
    color: #ff4949;
    font-size: 12px;
    flex: 1 0 auto;
    align-self: flex-end;
  }
  .content{
    width: 100%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>
